<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #canvas {
      background-color: gray;
      margin: 50px auto 0;
      display: block;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById("canvas")
    const gl = ctx.getContext("webgl")

    //着色器
    const VERTEX_SHADER_SOURCE = `
            attribute vec4 aPosition;
            attribute float deg;
            void main() {
              gl_Position.x = aPosition.x * cos(deg) - aPosition.y * sin(deg); 
              gl_Position.y = aPosition.x * sin(deg) + aPosition.y * cos(deg);
              gl_Position.z = aPosition.z;
              gl_Position.w = aPosition.w;
            }
        `
    const FRAGMENT_SHADER_SOURCE = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `
    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, "aPosition")
    const deg = gl.getAttribLocation(program, "deg")

    const points = new Float32Array([
      -0.5, -0.5,
      0.5, -0.5,
      0.0, 0.5,
    ])

    const buffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
    gl.enableVertexAttribArray(aPosition)

    let x = 1

    function animation() {
      x += -0.01
      gl.vertexAttrib1f(deg, x)
      gl.drawArrays(gl.TRIANGLES, 0, 3)
      requestAnimationFrame(animation)
    }

    animation()
  </script>




</body>

</html>
